<template>
  <div class="main">
    <div class="uc-header">
      <div class="back" @click="$router.back()">
        <img src="@/assets/img/3.png" />
      </div>
      <div class="title">{{ $t("AssetCenter") }}</div>
    </div>
    <!-- <div class="headcard">
      <div class="hc-tit">Balance <img src="@/assets/img/diamondd.png" alt=""> </div>
      <div class="hc-price">{{ formatMoney(assets_total, true) }}</div>
      <div class="hcbox">
        <div class="hcbox-item">
          <div> <img src="@/assets/img/diamondd.png" alt=""></div>
          <div class="text-r">{{ formatMoney(assets_available, true) }}</div>
        </div>
        <div class="hcbox-item">
          <div> <img src="@/assets/img/gold.png" alt=""></div>
          <div class="text-r">{{ formatMoney(gold, true) }}</div>
        </div>
        <div class="hcbox-item">
          <div>Freeze <img src="@/assets/img/diamondd.png" alt=""></div>
          <div class="text-r">{{ formatMoney(assets_freeze, true) }}</div>
        </div>
      </div>
    </div> -->

    <!-- <div class="tvbsbox">
      <div class="tvbsbox-item ti-1">
        <img src="@/assets/img/lock.png" @click="$router.push('/exchange')" />
        <p>Pertukaran</p>
      </div>
      <div class="tvbsbox-item ti-2" @click="$router.push('/recharge')">
        <img src="@/assets/img/lock.png" />
        <p>isi ulang</p>
      </div>
      <div class="tvbsbox-item ti-3">
        <img src="@/assets/img/lock.png" @click="$router.push('/withdrawal')" />
        <p>Withdrawal</p>
      </div>
    </div> -->
    <div class="listbox">
      <div class="listbox-head">
        <div class="listbox-head-l">{{ $t("OrderDetails") }}</div>
        <div class="listbox-head-r" @click="$router.push('/exchangeHistory')">
          <!-- all >> -->
        </div>
      </div>
      <van-list
        v-model="listLoading"
        @load="onLoadList"
        :finished="this.list.length == this.pages.total && this.pages.total > 0"
        :finished-text="$t('NoMore')"
      >
        <div class="nodata" v-show="pages.nodata">
          <img src="@/assets/img/default.jpg" />
          <p>No data</p>
        </div>
        <div class="list-item" v-for="(v, i) in list" :key="i">
          <div class="li-head">
            <!-- <div class="lih-l">No.{{ i + 1 }}</div> -->
            <div class="lih-r">{{ getTimes(v.datetime) }}</div>
          </div>
          <div class="lih-bbc">
            <div class="bbc-l">{{ $t("Type") }}</div>
            <div class="bbc-r">{{ v.amount_type }}</div>
          </div>
          <div class="lih-bbc">
            <div class="bbc-l">{{ $t("Name") }}</div>
            <div class="bbc-r">{{ v.name }}</div>
          </div>
          <div class="lih-bbc">
            <div class="bbc-l">{{ $t("Amount") }}</div>
            <div class="bbc-r">
              {{ v.symbol }}{{ formatMoney(v.diamond_change, true) }}
            </div>
          </div>
          <!-- <div class="lih-bbc">
            <div class="bbc-l">Balance</div>
            <div class="bbc-r">{{ formatMoney(v.balance,true) }}</div>
          </div> -->
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import { httpInfo, httpAssetChangeRecords, httpGameBalance } from "@/http/api";
import { getTimes, formatMoney } from "@/utils/common";
export default {
  name: "assetsCenter",
  data() {
    return {
      assets_total: 0, // 总资产
      assets_available: 0, //可用资产
      assets_freeze: 0, //冻结资产
      list: [],
      listLoading: false,
      listAjax: false,
      diamond: "0",
      gold: "0",
      pages: {
        // 分页信息
        page: 1,
        total: 0,
        nodata: false,
      },
    };
  },
  created() {
    this.getHttpInfo();
    this.getHttpGameBalance();
    // this.getHttpAssetChangeRecords()
  },
  methods: {
    getTimes,
    formatMoney,
    async getHttpInfo() {
      let res = await httpInfo();
      if (res.code == 0) {
        this.assets_total = res.data?.diamond || 0;
        this.assets_available = res.data?.diamond || 0;
        this.assets_freeze = res.data?.diamond || 0;
      }
    },

    //钻石余额
    async getHttpGameBalance() {
      let res = await httpGameBalance();
      if (res.code === 0) {
        this.gold = res.data?.gold || 0;
        // this.getHttpGameBalance();
      }
    },
    async getHttpAssetChangeRecords() {
      if (this.listAjax) return;
      let params = {
        page: this.pages.page,
      };
      this.listAjax = true;
      let res = await httpAssetChangeRecords(params);
      this.listAjax = false;
      this.listLoading = false;
      if (res.code == 0) {
        this.list = [...this.list, ...res.data.list];
        this.pages.total = res.data.page.total_count;

        if (this.list.length < this.pages.total) this.pages.page++;
        // if (!this.pages.total) this.pages.nodata = true;
        if (!this.pages.total) this.pages.nodata = true;
      }
    },
    onLoadList() {
      if (this.pages.nodata) return (this.listLoading = false);
      if (this.list.length == this.pages.total && this.pages.total > 0)
        return (this.listLoading = false);
      this.listLoading = true;
      this.getHttpAssetChangeRecords();
    },
  },
};
</script>

<style lang="less" scoped>
* {
  color: #93653e;
  font-weight: 400;
}

.main {
  width: 100%;
  padding-bottom: 20px;
  background-color: #e5c184;

  .headcard {
    width: 682px;
    height: 17vw;
    // background: linear-gradient(139.72deg,
    //     rgba(230, 233, 255, 1) 0%,
    //     rgba(206, 212, 248, 1) 47.16%,
    //     rgba(191, 200, 242, 1) 76.71%,
    //     rgba(170, 182, 232, 1) 100%);
    background: #e5c184;
    // background: linear-gradient(139.72deg,
    //     rgb(239, 203, 3) 0%,
    //     rgb(245, 225, 45) 47.16%,
    //     rgb(234, 241, 26) 76.71%,
    //     rgb(255, 225, 0) 100%);
    border-radius: 40px;
    margin: 32px auto;
    position: relative;

    .hc-tit {
      text-align: center;
      padding-top: 82px;
      font-size: 30px;
      font-weight: 500;
      letter-spacing: 0px;
      // color: rgba(171, 182, 212, 1);
      color: #93653e;
      margin-bottom: 24px;

      img {
        width: 35px;
        height: 35px;
        margin: -8px;
      }
    }

    .hc-price {
      font-size: 48px;
      font-weight: 700;
      letter-spacing: 0px;
      // color: rgba(112, 126, 162, 1);
      color: #93653e;
      text-align: center;
    }

    .hcbox {
      height: 130px;
      width: 100%;
      // background: #dde1fc;
      background: #f9f3dd;
      position: absolute;
      bottom: 0;
      border-radius: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .hcbox-item {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: 0px;
        // color: rgba(132, 144, 177, 1);
        width: 400px;
        display: flex;
        align-items: center;
        margin: 10px auto;

        img {
          width: 35px;
          height: 35px;
          margin: -8px;
        }

        div {
          width: 200px;
          text-align: right;

          &.text-r {
            text-align: center;
            width: 165px;
          }
        }
      }
    }
  }

  .tvbsbox {
    width: 100%;
    padding: 0 32px;
    display: flex;
    // justify-content: space-between;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 60px;
    color: #93653e;

    .tvbsbox-item {
      width: 208px;
      height: 144px;
      border-radius: 26px;
      text-align: center;
      font-size: 24px;
      font-weight: 700;

      img {
        width: 53px;
        height: 53px;
        margin: 24px;
      }

      &.ti-1 {
        background: linear-gradient(
          178.44deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 226, 196, 1) 100%
        );
        color: rgba(193, 162, 134, 1);
      }

      &.ti-2 {
        background: linear-gradient(
          178.44deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(179, 230, 241, 1) 100%
        );
        color: rgba(129, 174, 185, 1);
      }

      &.ti-3 {
        background: linear-gradient(
          178.44deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 221, 206, 1) 100%
        );
        color: rgba(188, 160, 147, 1);
      }
    }
  }

  .listbox {
    width: 100%;
    padding: 40px 32px;

    .listbox-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 36px;

      .listbox-head-l {
        font-size: 30px;
        font-weight: 400;
        letter-spacing: 0px;
        // color: rgba(112, 126, 162, 1);
        color: white;
        // font-weight: 800;
      }

      .listbox-head-r {
        font-size: 24px;
        font-weight: 400;
        letter-spacing: 0px;
        // color: rgb(62, 222, 9);
      }
    }

    .list-item {
      width: 682px;

      opacity: 1;
      // box-shadow: 0px 3px 12px 0px rgba(213, 213, 213, 0.56);
      box-shadow: 0px 3px 12px 0px rgba(20, 19, 19, 0.56);
      border-radius: 20px;
      padding: 0 30px;
      margin-bottom: 20px;

      .li-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 120px;
        border-bottom: 1px solid #806f6f;
        margin-bottom: 20px;

        .lih-l {
          width: 226px;
          height: 63px;
          // background: rgba(171, 182, 212, 1);
          background: rgb(196, 230, 145);
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          //font-weight: 800;
          letter-spacing: 0.96px;
          color: rgba(252, 252, 252, 1);
        }

        .lih-r {
          font-size: 24px;
          font-weight: 400;
          letter-spacing: 0px;
          // color: rgba(171, 182, 212, 1);
          color: #ffff;
        }
      }

      .lih-bbc {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        //font-weight: 800;
        border-radius: 10px;
        margin-bottom: -4px;

        .bbc-l {
          font-size: 28px;
          height: 60px;
          letter-spacing: 0px;
          // color: rgba(171, 182, 212, 1);
          color: #ffff;
          // font-weight: 800;
        }

        .bbc-r {
          font-size: 28px;
          letter-spacing: 0px;
          height: 60px;
          // color: rgba(132, 144, 177, 1);
          color: #ffff;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
